<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Entry Form</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="app" class="container">
        <div class="main-content">
            <div class="left-panel">
                <input v-model="entryId" placeholder="entry_id">
                <a :href="`https://arxiv.org/abs/${entryId}`" target="_blank">查看arxiv</a>
                <a :href="`https://arxiv.org/pdf/${entryId}`" target="_blank">查看原文</a>
                <input v-model="title" placeholder="title">
                
                <textarea v-model="absText1" placeholder="abs 段文"></textarea>
                <textarea v-model="absText2" placeholder="abs 段2"></textarea>

                <div class="buttons">
                    <button @click="selectEntry">选中</button>
                    <button @click="previousEntry">上一个</button>
                    <button @click="nextEntry">下一个</button>
                    <button @click="jumpToID">跳转</button>
                </div>

            </div>
            
            <div class="right-panel">
                <div v-for="(tag, index) in tags" :key="index" class="tag-item">
                    <input v-model="tag.key" placeholder="Key">
                    <input v-model="tag.value" placeholder="Value">
                    <button @click="addTag(index)">+</button>
                    <button @click="removeTag(index)" v-if="tags.length > 1">-</button>
                </div>
            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="js/index.js"></script>
    <script>
        // 调整textarea高度的函数
        function adjustTextareaHeight(textarea) {
            textarea.style.height = 'auto'; // 先重置高度
            textarea.style.height = textarea.scrollHeight + 'px'; // 设置为内容的高度
        }

        // 获取所有textarea元素
        const textareas = document.querySelectorAll('textarea');

        // 定期检查textarea内容并调整高度
        textareas.forEach(textarea => {
            let lastValue = textarea.value;
            setInterval(() => {
                if (textarea.value !== lastValue) {
                    lastValue = textarea.value;
                    adjustTextareaHeight(textarea);
                }
            }, 300); // 每300ms检查一次
        });
    </script> 
</body>
</html>
